import React from 'react';
import {NavLink} from 'react-router-dom'
import {activeMenuLink} from './../styles'

class MenuItem extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const {menu} = this.props;
        return <div>
            <NavLink activeStyle={activeMenuLink} className="menu-link" to={menu.path}>{menu.name}</NavLink>
            <ul>
                {
                    menu.subMenus && menu.subMenus.map(function (ele, index) {
                        return <li key={`${index}`} className="menu-link-sub">
                            <NavLink activeStyle={activeMenuLink} to={`${menu.path}${ele.path}`}>{ele.name}</NavLink>
                        </li>
                    })
                }
            </ul>
        </div>
    }
}

export default MenuItem;

// var menu = {
//     name: "name",
//     path: "/users",
//     subMenus: [
//         {
//             name: "xjp",
//             path: "/xjp"
//         }
//     ]
// }
